<template>
	<div class="main">

		<div class="container" style="box-sizing: border-box;">

			<!-- Sign Up -->
			<div class="box" style="position: relative;">
				<div style="position: absolute;left: 3.125rem;top: 30px;color: #999999;cursor: pointer;" @click="back">返回</div>
				<!-- 注册框开始 -->
				<div class="container--signup">
					<form action="#" class="form" id="form1">
						<h2 class="form__title">找回密码</h2>
						<div class="ping">
							

							<div style="width: 100%;">
								<input type="text" v-model="user.phone" placeholder="手机号" class="input" />
							</div>
						</div>
						<div class="yz">
							<input type="vcode" v-model="user.forgetPasswordCode" placeholder="请输入验证码" class="input" />
							<button class="yzbtn" @click="getCode">{{code}}</button>
						</div>
						<div class="yz">
							<input type="password" v-model="user.password" placeholder="设置新密码" class="input" />
						</div>
						<div class="yz">
							<input type="password" v-model="password" placeholder="确认密码" class="input" />
						</div>

						<div class="yz" style="padding: 0.5em 0">
							<el-button size="medium" style="width: 100%" type="primary" round @click="next">下一步</el-button>
						</div>

					</form>

				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	import {
		HttpManager
	} from '../../request/login.js'
	import {
		Regular
	} from '../../utils/regular.js'
	export default {
		data() {
			return {
				code: "发送验证码",
				user: {
					phone: "",
					forgetPasswordCode: "",
					password: "",
				},
				password: ''
			};
		},
		methods: {
			next() {
				//    const arr=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
				// const ass=/^[a-zA-Z]\w{5,17}$/
				// if(arr.test(this.user.phone)===true && ass.test(this.user.password)===true && this.user.registercode ===this.code){
				this.axios.post("/user/accountResetPassword", this.qs.stringify(this.user)).then((res) => {
					console.log(res);
					if (res.data.code === 200) {
					
						const token = res.data.token;
						localStorage.setItem("token", token); //本地储存token 用来备份以防丢失
						this.$message({
							message: res.data.message,
							type: 'success'
						});
						this.$router.push("/");
						
					} 
					else if (res.data.code === 500) {
						alert("注册失败")
					}

				})
				// }else if(this.user.registercode != this.code){
				//   alert("验证码错误")
				//   }else{
				//   	alert("注册失败，请重试")
				//   }

			},
			back() {
				this.$router.push('/Login');
			},
			getCode() {
				// const arr=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
				// console.log('验证');
				// if(arr.test(this.user.phone)){
                if(this.user.phone==='')
				{
					alert("请输入电话号码");
					return ;
				}
				this.axios.get('/user/sendForgetPasswordCode', {
						params: {
							phone: this.user.phone
						}
					})
					.then((res) => {
						console.log(res);
						this.$message({
							message: res.data.message,
							type: 'success'
						});
						
					})
				// }else{
				//  	alert("手机号输入错误，请重新输入")
				//  }
			},


		},
	};
</script>

<style scoped="scoped">
	* {
		box-sizing: border-box;
		outline: none;
	}

	.main {
		/* COLORS */
		--white: #ffffff;
		--gray: #333;
		/* --blue: #0367a6; */
		--lightblue: #008997;

		/* RADII */
		--button-radius: 0.7rem;

		/* SIZES */
		--max-width: 382px;
		--max-height: 538px;

		font-size: 16px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
			Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}

	.main {
		align-items: center;
		background-color: var(--white);
		/* background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg"); */
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		min-height: 100vh;
		/* height: 25rem; */
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00b6b4;
	}

	.form__title {
		font-weight: 300;
		margin: 0;
		margin-bottom: 1.25rem;
	}

	.link {
		color: var(--gray);
		font-size: 0.9rem;
		text-decoration: none;
	}

	.forgotPass {
		display: flex;
		justify-content: flex-end;
	}

	.container {
		background-color: var(--white);
		border-radius: var(--button-radius);
		box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
			0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
		height: var(--max-height);
		width: 500px;
		overflow: hidden;
		position: relative;
	}

	.box {
		position: absolute;
		left: 0;
		width: 494px;
		height: 100%;
		display: flex;
		justify-content: space-between;
		transition: 1s all linear;
	}

	.container--signin,
	.container--signup {
		width: 600px;
	}

	.btn {
		background-color: var(--blue);
		background-image: linear-gradient(90deg,
			var(--blue) 0%,
			var(--lightblue) 74%);
		border-radius: 20px;
		border: 1px solid var(--blue);
		color: var(--white);
		cursor: pointer;
		font-size: 0.8rem;
		font-weight: bold;
		letter-spacing: 0.1rem;
		padding: 0.9rem 4rem;
		text-transform: uppercase;
		transition: transform 80ms ease-in;
	}

	.form>.btn {
		margin-top: 1.5rem;
	}

	.btn:active {
		transform: scale(0.95);
	}

	.btn:focus {
		outline: none;
	}

	.form {
		background-color: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-left: 3rem;
		padding-right: 3rem;
		padding-top: 0;
		height: 100%;
		text-align: center;
	}

	.input {
		background-color: #fff;
		border: #ebebeb 0.0625rem solid;
		padding: 0.9rem 0.9rem;
		margin: 0.5rem 0;
		width: 100%;
		border-radius: 30px;
		height: 3rem;
		margin-bottom: 1.25rem;
	}

	.btnround {
		position: relative;
		top: 20px;
	}

	.yz {
		width: 100%;
		position: relative;
		display: flex;

	}

	.yzbtn {
		width: 7em;
		height: 3em;
		position: relative;
		top: 10px;
		border-radius: 30px;
		border: none;
		color: white;
		font-size: 12px;
		padding: 1px;
		background-color: #00b6b4;

	}

	.aa {
		width: 100%;
		height: 100%;
		display: flex;

	}

	.el-dropdown-link {
		cursor: pointer;
		color: #00b6b4;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.el-icon-arrow-down {
		font-size: 12px;
		display: flex;
	}

	.ping {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: relative;
	}

	.he {
		background-color: #fff;
		width: 30%;
		height: 60%;
		border: #ebebeb 0.0625rem solid;
		border-radius: 30px;
		margin-right: 15px;
		margin-bottom: 1.25rem;
	}

	.txt {
		width: 50%;
	}

	.el-button {
		/* background-image: #00b6b4; */
		background-color: #00b6b4;
		border: none;
		height: 3rem;
	}

	.el-button:hover {
		background-image: radial-gradient(circle 248px at center,
			#16d9e3 0%,
			#69bec2 47%,
			#00b6b4 100%);
	}
</style>
